<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入学校名称"
                            v-model="searchInfo.schoolName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            placeholder="请输入班级名称"
                            v-model="searchInfo.className"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status">
                    <el-select
                            v-model="searchInfo.classStatus"
                            placeholder="请选择班级状态"
                            clearable
                            size="mini"
                    >
                        <el-option
                                v-for="item in classStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog('add','')" size="mini"
                               v-if="btns&&btns.includes('add')&&(currentRoleId===4||currentRoleId===3)">新 增
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="batchExportSignUp" size="mini"
                               v-if="currentRoleId===1||currentRoleId===2">批量导出考勤记录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border
                  @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="className" label="班级名称" align="center">
            </el-table-column>
            <el-table-column prop="schoolName" label="学校" align="center" v-if="currentRoleId!==4">
            </el-table-column>
            <!--            <el-table-column prop="courseName" label="课程" align="center">-->
            <!--            </el-table-column>-->
            <el-table-column prop="courseTime" label="上课时间" align="center">
            </el-table-column>
            <el-table-column prop="classRoomName" label="教室" align="center">
            </el-table-column>
            <!--            <el-table-column prop="teacherName" label="老师" align="center" width="80px">-->
            <!--            </el-table-column>-->
            <el-table-column label="人数范围" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.stuNoMax > 0 ? scope.row.stuNoMin +'~' +scope.row.stuNoMax:''}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="classState" label="班级状态" align="center">
                <template slot-scope="scope">
                    <span>{{filterStatus(scope.row.classStatus)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="进度" align="center" width="80px">
                <template slot-scope="scope">
                    <span>{{scope.row.courseFinishCount}}/{{scope.row.courseHourCount}}</span>
                </template>
            </el-table-column>
            <el-table-column label="来源" align="center" width="80" v-if="currentRoleId!==3">
                <template slot-scope="scope">
                    <span>{{scope.row.type===0?'机构':'学校'}}</span>
                </template>
            </el-table-column>
            <!--机构-->
            <el-table-column fixed="right" label="操作" align="center" width="370px"
                             v-if="currentRoleId===3">
                <template slot-scope="scope">
                    <el-button
                            @click="showCourse(scope.row)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="btns&&btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="editArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))&&(scope.row.classStatus===0||scope.row.classStatus===7)"
                    >编辑
                    </el-button>
                    <el-button
                            @click="signUpDetail(scope.row)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="(btns&&btns.includes('signUpDetail'))&&(scope.row.classStatus===3||scope.row.classStatus===4||scope.row.classStatus===5||scope.row.classStatus===6||scope.row.classStatus===6)"
                    >报名情况
                    </el-button>
                    <el-button
                            @click="applySchoolDialog(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-notebook-1"
                            v-if="(btns&&btns.includes('signUpDetail'))&&(scope.row.classStatus===0||scope.row.classStatus===7)"
                    >申请开班
                    </el-button>
                    <el-button
                            @click="applyCancel(scope.row.classId)"
                            size="mini"
                            type="warning"
                            icon="el-icon-circle-close"
                            v-if="(btns&&btns.includes('applyCancel'))&&scope.row.classStatus===1"
                    >取消申请
                    </el-button>
                    <el-button
                            @click="deleteAreas(scope.row)"
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="(btns&&btns.includes('delete'))&&(scope.row.classStatus===0||scope.row.classStatus===7)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
            <!--管理员/运营-->
            <el-table-column fixed="right" label="操作" align="center" width="375px"
                             v-if="currentRoleId===1||currentRoleId===2">
                <template slot-scope="scope">
                    <el-button
                            @click="showCourse(scope.row)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="btns&&btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="editArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))&&(scope.row.classStatus===2||scope.row.classStatus===3||scope.row.classStatus===4||scope.row.classStatus===5)"
                    >编辑
                    </el-button>
                    <el-button
                            @click="signUpDetail(scope.row)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="(btns&&btns.includes('signUpDetail'))&&(scope.row.classStatus===3||scope.row.classStatus===4||scope.row.classStatus===5||scope.row.classStatus===6||scope.row.classStatus===8)"
                    >报名情况
                    </el-button>
                    <!--                    <el-button-->
                    <!--                            @click="assignSupplierDialog(scope.row)"-->
                    <!--                            size="mini"-->
                    <!--                            type="primary"-->
                    <!--                            icon="el-icon-thumb"-->
                    <!--                            v-if="(btns&&btns.includes('assignSupplier'))&&(scope.row.classState===0||scope.row.classState===1)&&scope.row.containMaterialFlag===1"-->
                    <!--                    >指定供应商-->
                    <!--                    </el-button>-->
                    <el-button
                            @click="attendance(scope.row)"
                            size="mini"
                            type="primary"
                            v-if="(btns&&btns.includes('attendance'))&&(scope.row.classStatus===4||scope.row.classStatus===5)"
                    >出勤情况
                    </el-button>
                </template>
            </el-table-column>
            <!--学校情况-->
            <el-table-column fixed="right" label="操作" width="370px" align="center" v-if="currentRoleId===4">
                <template slot-scope="scope">
                    <el-button
                            @click="showCourse(scope.row)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="btns&&btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="editArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))&&scope.row.classStatus===1"
                    >编辑
                    </el-button>
                    <el-button
                            @click="deleteAreas(scope.row)"
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="(btns&&btns.includes('delete'))&&scope.row.classStatus===1&&scope.row.type===1"
                    >删除
                    </el-button>
                    <el-button
                            @click="releaseApply(scope.row.classId,scope.row.classStatus)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('release'))&&scope.row.classStatus===1"
                    >发布
                    </el-button>
                    <el-button
                            @click="refuseDialog(scope.row.classId)"
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="btns&&btns.includes('refuse')&&scope.row.classStatus===1&&scope.row.type===0"
                    >拒绝
                    </el-button>
                    <el-button
                            @click="signUpDetail(scope.row)"
                            size="mini"
                            type="success"
                            icon="el-icon-view"
                            v-if="(btns&&btns.includes('signUpDetail'))&&(scope.row.classStatus===3||scope.row.classStatus===4||scope.row.classStatus===5||scope.row.classStatus===6||scope.row.classStatus===8)"
                    >报名情况
                    </el-button>
                    <el-button
                            @click="signUpCancelDialog(scope.row.classId)"
                            size="mini"
                            type="success"
                            icon="el-icon-view"
                            v-if="(btns&&btns.includes('signUpCancel'))&&(scope.row.classStatus===2||scope.row.classStatus===3)"
                    >取消报名
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <!--班级信息-->
        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-form
                    :model="form"
                    :inline="true"
                    :rules="rules"
                    label-width="100px"
                    ref="areaForm"
            >
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="班级名称" prop="className">
                    <el-input
                            autocomplete="off"
                            v-model="form.className"
                            size="small"
                            placeholder="请输入班级名称"
                            clearable
                            :disabled="type==='show'||type==='release'||type==='adminEdit'"
                    ></el-input>
                </el-form-item>
                <el-form-item label="开班日期" prop="planOpenDate" v-if="showFlag">
                    <el-date-picker
                            :disabled="type==='show'||adminOpenClassFlag"
                            size="small"
                            clearable
                            v-model="form.planOpenDate"
                            type="date"
                            format='yyyy-MM-dd'
                            value-format="yyyy-MM-dd"
                            placeholder="请选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="报名开始时间" prop="signUpStartTime" label-width="110px" v-if="showFlag">
                    <el-date-picker
                            :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                            size="small"
                            clearable
                            v-model="form.signUpStartTime"
                            type="datetime"
                            format='yyyy-MM-dd HH:mm'
                            value-format="yyyy-MM-dd HH:mm"
                            placeholder="请选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="报名截止时间" prop="signUpEndTime" label-width="110px" v-if="showFlag">
                    <el-date-picker
                            :disabled="type==='show'||adminOpenClassFlag"
                            size="small"
                            clearable
                            v-model="form.signUpEndTime"
                            type="datetime"
                            format='yyyy-MM-dd HH:mm'
                            value-format="yyyy-MM-dd HH:mm"
                            placeholder="请选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-divider content-position="left">课程信息</el-divider>
                <el-form-item label="课程" prop="courseId" v-if="showFlag">
                    <el-select v-model="form.courseId" filterable value-key="form.courseId" placeholder="请选择课程"
                               @change="handleCourse" :disabled="type!=='add'">
                        <el-option
                                v-for="item in courseListOptions"
                                :key="item.courseId"
                                :label="item.courseName"
                                :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程" prop="courseId" style="padding-right: 400px" v-else>
                    <el-select v-model="form.courseId" filterable value-key="form.courseId" placeholder="请选择课程"
                               @change="handleCourse" :disabled="type==='show'||type==='edit'">
                        <el-option
                                v-for="item in courseListOptions"
                                :key="item.courseId"
                                :label="item.courseName"
                                :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学校名称" prop="schoolName" v-if="form.type===1&&showFlag">
                    <el-input
                            :disabled="true"
                            autocomplete="off"
                            v-model="form.schoolName"
                            size="small"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="机构编号" prop="orgNo" v-if="form.type===0&&showFlag">
                    <el-input
                            :disabled="true"
                            autocomplete="off"
                            v-model="form.orgNo"
                            size="small"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="适用年级" prop="courseGrade">
                    <el-select
                            :disabled="type==='show'||adminOpenClassFlag"
                            v-model="form.courseGrade"
                            value-key="form.courseGrade"
                            multiple
                            placeholder="请选择适用年级"
                            size="small"
                            clearable
                    >
                        <el-option
                                v-for="item in gradesOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课周期" prop="courseWeek">
                    <el-select
                            :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                            v-model="form.courseWeek"
                            value-key="form.courseWeek"
                            multiple
                            placeholder="请选择上课周期"
                            size="small"
                            clearable
                    >
                        <el-option
                                v-for="item in courseTimeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课时间" prop="startTime" v-if="showFlag">
                    <el-time-select :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                                    size="small"
                                    placeholder="起始时间"
                                    v-model="form.startTime"
                                    :picker-options="{
                              start: '07:00',
                              step: '00:05',
                              end: '23:30'
                            }">
                    </el-time-select>&nbsp;
                </el-form-item>
                <el-form-item prop="endTime" v-if="showFlag">
                    <el-time-select :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                                    size="small"
                                    placeholder="结束时间"
                                    v-model="form.endTime"
                                    :picker-options="{
                             start: '07:00',
                              step: '00:05',
                              end: '23:30',
                              minTime: form.startTime
                            }">
                    </el-time-select>
                </el-form-item>
                <el-form-item label=" " v-if="showFlag"></el-form-item>
                <el-form-item label="课时数" prop="courseHourCount">
                    <el-input
                            :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                            autocomplete="off"
                            v-model="form.courseHourCount"
                            size="small"
                            placeholder="课时数"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="课时单价" prop="courseHourPriceShow">
                    <el-input
                            :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            autocomplete="off"
                            v-model="form.courseHourPriceShow"
                            size="small"
                            placeholder="请输入课时单价"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item
                        label="是否包含教材/教具"
                        prop="goodsFlag"
                        class="item-label"
                >
                    <el-select
                            :disabled="true"
                            v-model="form.goodsFlag"
                            value-key="form.goodsFlag"
                            placeholder="请选择是否包含教材/教具"
                            @change="handleMaterial"
                            size="small"
                            clearable
                    >
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="教材/教具名称"
                        prop="goodsName"
                        v-if="form.goodsFlag === 1"
                        class="item-label"
                >
                    <el-input
                            :disabled="true"
                            autocomplete="off"
                            v-model="form.goodsName"
                            size="small"
                            placeholder="请输入教材/教具名称"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item
                        label="教材/教具价格"
                        prop="goodsPriceShow"
                        v-if="form.goodsFlag === 1"
                        class="item-label"
                >
                    <el-input
                            :disabled="true"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            autocomplete="off"
                            v-model="form.goodsPriceShow"
                            size="small"
                            placeholder="请输入教材/教具价格"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item
                        label="是否必须购买"
                        prop="buyFlag"
                        v-if="form.goodsFlag === 1"
                        class="item-label"
                >
                    <el-select
                            :disabled="type==='show'||adminSignInFlag||adminOpenClassFlag"
                            v-model="form.buyFlag"
                            placeholder="是否必须购买"
                            size="small"
                            clearable
                    >
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师" prop="teacherId">
                    <el-select v-model="form.teacherId" value-key="form.teacherId" placeholder="请选择教师" size="small"
                               :disabled="type==='show'||form.teacherUpdateFlag===0"
                               @change="handleTeacher"
                               clearable>
                        <el-option
                                v-for="item in teacherListOptions"
                                :key="item.teacherId"
                                :label="item.teacherName"
                                :value="item.teacherId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-divider content-position="left" v-if="showFlag">教室信息</el-divider>
                <el-form-item label="教室名称" prop="classRoomId" v-if="showFlag">
                    <el-select
                            :disabled="type==='show'||adminOpenClassFlag"
                            v-model="form.classRoomId"
                            value-key="form.classRoomId"
                            placeholder="请选择教室"
                            size="small"
                            clearable
                            @change="handleClassroom"
                    >
                        <el-option
                                v-for="item in classRoomListOptions"
                                :key="item.classRoomId"
                                :label="item.classRoomName"
                                :value="item.classRoomId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人数范围" prop="stuNoMin" class="item-labels" v-if="showFlag">
                    <el-input
                            :disabled="type==='show'||adminOpenClassFlag"
                            autocomplete="off"
                            v-model="form.stuNoMin"
                            size="small"
                            placeholder="最小人数"
                            clearable
                    ></el-input>
                    ~
                    <el-input
                            :disabled="type==='show'||adminOpenClassFlag"
                            autocomplete="off"
                            v-model="form.stuNoMax"
                            size="small"
                            placeholder="最大人数"
                            clearable
                    ></el-input>
                </el-form-item>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog" size="mini">取 消</el-button>
                <el-button @click="enterDialog" type="primary" size="mini" v-if="saveFlag&&!showFlag"
                >确 定
                </el-button
                >
                <el-button @click="enterDialog" type="primary" size="mini" v-if="type==='adminEdit'"
                >确 定
                </el-button
                >
                <el-button @click="enterDialog" type="primary" size="mini" v-if="saveFlag&&showFlag&&type!=='adminEdit'"
                >发 布
                </el-button
                >
            </div>
        </el-dialog>

        <!--报名情况弹框内容-->
        <el-dialog
                :before-close="closeRgistrationDialog"
                :title="registrationTitle"
                :visible.sync="registrationDialogVisible"
                class="registrationDialogs"
        >
            <el-form :inline="true" :model="signUpSearchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入学生姓名"
                            v-model="signUpSearchInfo.studentName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="signUpOnSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
            </el-form>
            <el-table :data="registrationTableData" style="width: 100%;margin-bottom: 10px;" border>
                <el-table-column prop="studentName" label="学生姓名" align="center">
                </el-table-column>
                <el-table-column prop="studentSex" label="性别" align="center">
                    <template slot-scope="scope">
                    <span :class="scope.row.studentSex == 1 ? 'green' : 'red'">{{
                      scope.row.studentSex == 1 ? "男" : "女"
                    }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="studentGrade" label="年级" align="center">
                </el-table-column>
                <el-table-column prop="studentClass" label="原始班级" align="center">
                </el-table-column>
                <el-table-column prop="orderStatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <span>{{filterRegistrationStatus(scope.row.orderStatus)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="报名时间" align="center">
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="registrationCurrPage"
                    :page-size="registrationPageSize"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :style="{ float: 'right', padding: '20px' }"
                    :total="registrationTotalCount"
                    @current-change="registrationHandlepageChange"
                    @size-change="registrationHandleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </el-dialog>

        <!--申请开班弹出框-->
        <el-dialog
                :before-close="closeApplyDialog"
                title="申请开班"
                :visible.sync="applyDialogVisible"
                width="400px"
        >
            <el-form
                    :model="schoolForm"
                    :inline="true"
                    :rules="rules"
                    ref="schoolForm"
            >
                <el-form-item label="学校" prop="schoolId">
                    <el-select v-model="schoolForm.schoolId" value-key="schoolForm.schoolId" placeholder="请选择学校"
                               size="small"
                               @change="handleApplySchool"
                               clearable>
                        <el-option
                                v-for="item in schoolListOptions"
                                :key="item.schoolId"
                                :label="item.schoolName"
                                :value="item.schoolId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="applySchool" type="primary" size="mini">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--指定供应商弹出框-->
        <el-dialog
                :before-close="closeSupplierDialogVisible"
                title="指定供应商"
                :visible.sync="supplierDialogVisible"
                width="400px"
        >
            <el-form
                    :model="supplierForm"
                    :inline="true"
                    :rules="rules"
                    ref="supplierForm"
            >
                <el-form-item label="供应商" prop="supplierId">
                    <el-select v-model="supplierForm.supplierId" value-key="supplierForm.supplierId"
                               placeholder="请选择供应商" size="small"
                               @change="handleSupplier"
                               clearable>
                        <el-option
                                v-for="item in supplierListOptions"
                                :key="item.supplierId"
                                :label="item.supplierName"
                                :value="item.supplierId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="saveAssignSupplier" type="primary" size="mini">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--出勤情况弹出框-->
        <el-dialog
                :before-close="closeAttendanceDialog"
                title="考勤情况"
                :visible.sync="attendanceDialogVisible"
                class="registrationDialogs"
        >
            <el-form :inline="true" :model="attendanceSearchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-select
                            v-model="attendanceSearchInfo.classDate"
                            style="width: 130px"
                            placeholder="请选择课节"
                            clearable
                            size="mini"
                            @change="selectDate"
                    >
                        <el-option
                                v-for="item in lessonsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input
                            placeholder="请输入学生姓名"
                            v-model="attendanceSearchInfo.studentName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="attendanceSearch" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="exportSignIn" type="primary" size="mini"
                    >导出签到课表
                    </el-button
                    >
                </el-form-item>
            </el-form>
            <el-table :data="attendanceTableData" style="width: 100%;margin-bottom: 10px;" border>
                <el-table-column prop="studentName" label="学生姓名" align="center">
                </el-table-column>
                <el-table-column prop="studentSex" label="性别" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.studentSex === '男' ? 'green' : 'red'">{{scope.row.studentSex}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="studentGrade" label="年级" align="center">
                </el-table-column>
                <el-table-column prop="originalClass" label="原始班级" align="center">
                </el-table-column>
                <el-table-column prop="guardianMobile" label="家长联系方式" align="center">
                </el-table-column>
                <el-table-column prop="signUP" label="签到状态" align="center">
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="attendanceCurrPage"
                    :page-size="attendancePageSize"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :style="{ float: 'right', padding: '20px' }"
                    :total="attendanceTotalCount"
                    @current-change="attendanceHandlepageChange"
                    @size-change="attendanceHandleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {
        addGrade,
        adminEditClass,
        applySchoolCourse,
        applySchoolCourseCancel,
        beginClass,
        classDetail,
        classRoomList,
        courseList,
        deleteGrade,
        editUnReleaseGrade,
        enableClass,
        gradeList,
        listAttendance,
        listCourseDate,
        refuseApply,
        releaseGrade,
        signUpCancel,
        signUpClass,
        updateSupplier
    } from "@/api/grade";
    import {registrationList} from "@/api/order";
    import {simpleTeacherList} from "@/api/teacher";
    import {userSchoolList} from "@/api/account";
    import {supplierSimpleList} from "@/api/supplier";
    import infoList from "@/components/mixins/infoList";

    export default {
        name: "grade",
        mixins: [infoList],
        data() {
            return {
                adminToSignFlag: false,
                adminSignInFlag: false,
                adminOpenClassFlag: false,
                showFlag: true,
                multipleSelection: [],
                registrationTitle: '',
                pickerOptions: {
                    disabledDate(v) {
                        return v.getTime() < new Date().getTime() - 86400000;
                    }
                },
                attendanceClassId: 0,
                signUpSearchInfo: {studentName: ''},
                attendanceSearchInfo: {},
                searchInfo: {className: '', classStatus: '', schoolName: ''},
                classId: 0,
                currentRoleId: 0,
                applyDialogVisible: false,
                attendanceDialogVisible: false,
                registrationCurrPage: 1,
                registrationTotalCount: 0,
                registrationPageSize: 10,
                registrationTableData: [],
                attendanceCurrPage: 1,
                attendanceTotalCount: 0,
                attendancePageSize: 10,
                attendanceTableData: [],
                saveFlag: true,
                btns: [],
                path: process.env.VUE_APP_BASE_API,
                value1: "",
                classRoomListOptions: [],
                schoolListOptions: [],
                courseListOptions: [],
                teacherListOptions: [],
                supplierListOptions: [],
                classStatusOptions: [],
                courseTimeOptions: [
                    {
                        value: 1,
                        label: "星期一",
                    },
                    {
                        value: 2,
                        label: "星期二",
                    },
                    {
                        value: 3,
                        label: "星期三",
                    },
                    {
                        value: 4,
                        label: "星期四",
                    },
                    {
                        value: 5,
                        label: "星期五",
                    },
                    {
                        value: 6,
                        label: "星期六",
                    },
                    {
                        value: 7,
                        label: "星期日",
                    },
                ],
                gradesOptions: [
                    {
                        value: 1,
                        label: "一年级",
                    },
                    {
                        value: 2,
                        label: "二年级",
                    },
                    {
                        value: 3,
                        label: "三年级",
                    },
                    {
                        value: 4,
                        label: "四年级",
                    },
                    {
                        value: 5,
                        label: "五年级",
                    },
                    {
                        value: 6,
                        label: "六年级",
                    },
                ],
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    }
                ],
                lessonsOptions: [],
                listApi: gradeList,
                dialogFormVisible: false,
                registrationDialogVisible: false,
                supplierDialogVisible: false,
                dialogTitle: "新增班级",
                form: {
                    courseId: '',
                    classRoomName: '',
                    courseHourCount: '',
                    courseHourPriceShow: '',
                    goodsFlag: '',
                    buyFlag: ''
                },
                supplierForm: {supplierId: '', classId: '', supplierName: ''},
                schoolForm: {classId: '', schoolId: '', schoolName: ''},
                type: "",
                rules: {
                    className: [{required: true, message: "请输入班级名称", trigger: "blur"}],
                    startTime: [{required: true, message: "请选择上课开始时间", trigger: "blur"}],
                    endTime: [{required: true, message: "请选择上课结束时间", trigger: "blur"}],
                    planOpenDate: [{required: true, message: "请输入开班日期", trigger: "blur"}],
                    signUpStartTime: [{required: true, message: "请输入报名开始时间", trigger: "blur"}],
                    signUpEndTime: [{required: true, message: "请输入报名截止时间", trigger: "blur"}],
                    courseId: [{required: true, message: "请选择课程", trigger: "blur"}],
                    courseGrade: [{required: true, message: "请选择适用年级", trigger: "blur"}],
                    courseWeek: [{required: true, message: "请选择上课周期", trigger: "blur"}],
                    teacherId: [{required: true, message: "请选择教师", trigger: "blur"}],
                    classRoomId: [{required: true, message: "请选择教室", trigger: "blur"}],
                    stuNoMin: [{required: true, message: "请输入最小人数", trigger: "blur"}],
                    stuNoMax: [{required: true, message: "请输入最大人数", trigger: "blur"}]
                }
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            registrationHandleSizeChange(val) {
                this.registrationPageSize = val
                this.getRegistrationTableData()
            },
            registrationHandlepageChange(val) {
                this.registrationCurrPage = val
                this.getRegistrationTableData()
            },
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待申请';
                    case 1:
                        return '待发布';
                    case 2:
                        return '待报名';
                    case 3:
                        return '报名中';
                    case 4:
                        return '待开班';
                    case 5:
                        return '已开班';
                    case 6:
                        return '已完成';
                    case 7:
                        return '拒绝';
                    case 8:
                        return '开班失败';
                    default:
                        break;
                }
            },
            filterRegistrationStatus(val) {
                switch (val) {
                    case 0:
                        return '待付款';
                    case 1:
                        return '已付款';
                    case 2:
                        return '已开班';
                    case 3:
                        return '已退款';
                    case 4:
                        return '已取消';
                    default:
                        break;
                }
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            //条件搜索前端看此方法
            signUpOnSubmit() {
                this.registrationCurrPage = 1;
                this.registrationPageSize = 10;
                this.getRegistrationTableData();
            },
            handleCourse(val) {
                this.courseListOptions.forEach(i => {
                    if (val === i.courseId) {
                        this.$set(this.form, 'courseGrade', i.courseGrade.split(",").map(Number))
                        this.form.courseId = i.courseId;
                        this.form.courseHourCount = i.courseHourCount;
                        this.form.courseHourPriceShow = i.courseHourPriceShow;
                        this.form.goodsFlag = i.goodsFlag;
                        this.form.goodsId = i.goodsId;
                        this.form.goodsName = i.goodsName;
                        this.form.goodsPriceShow = i.goodsPriceShow;
                        this.form.buyFlag = i.buyFlag;
                    }
                })
                this.$forceUpdate();
            },
            handleSelectionChange(val) {
                this.multipleSelection = [];
                val.forEach(i => {

                    this.multipleSelection.push(i.classId)
                })

            },
            handleMaterial(val) {
                // if (val === 0) {
                //     this.form.courseMaterialName = '';
                //     this.form.courseMaterialPrice = 0;
                //     this.form.requireBuyFlag = 0;
                // }
            },
            handleClassroom(val) {
                this.classRoomListOptions.forEach(i => {
                    if (val === i.classRoomId) {
                        this.$set(this.form, 'stuNoMax', i.stuNoMax)
                        this.form.classRoomName = i.classRoomName
                    }
                })
            },
            handleTeacher(val) {
                this.$forceUpdate();
                this.teacherListOptions.forEach(item => {
                    if (val === item.teacherId) {
                        this.form.teacherName = item.teacherName
                    }
                })
            },
            handleSupplier(val) {
                this.$forceUpdate();
                this.supplierListOptions.forEach(item => {
                    if (val === item.supplierId) {
                        this.supplierForm.supplierName = item.supplierName
                    }
                })
            },

            //保存指定供应商
            async saveAssignSupplier() {
                if (this.supplierForm.supplierId === '') {
                    this.$message({
                        message: '请选择供应商',
                        type: 'warning'
                    });
                }
                this.$confirm("此操作将指定供应商, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await updateSupplier(this.supplierForm);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "更新成功!",
                            });
                            this.closeSupplierDialogVisible();
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        // this.$message({
                        //     type: "info",
                        //     message: "已取消",
                        // });
                    });
            },
            async assignSupplierDialog(classDetail) {
                if (this.supplierListOptions.length === 0) {
                    const res = await supplierSimpleList();
                    this.supplierListOptions = res.data;
                }
                this.supplierForm.classId = classDetail.classId;
                if (classDetail.supplierId !== '0') {
                    this.supplierForm.supplierId = classDetail.supplierId;
                    this.supplierForm.supplierName = classDetail.supplierName;
                }
                this.supplierDialogVisible = true;
            },
            closeSupplierDialogVisible() {
                this.supplierDialogVisible = false;
                this.$refs.supplierForm.resetFields();
            },
            async exportSignUp(val) {
                let excelPath = this.path + "api-course/class/export/sign-up/" + val.classId + "?type=0";
                window.open(excelPath);
            },
            //导出出勤情况
            exportSignIn() {
                let classDate = this.attendanceSearchInfo.classDate;
                let excelPath = this.path + "api-course/class/export/sign-up/" + this.attendanceClassId + "?type=1&classSate=" + classDate;
                window.open(excelPath);
            },
            //批量导出考勤
            batchExportSignUp() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: "error",
                        message: "请选择需要导出的记录",
                        showClose: true,
                    });
                    return;
                }
                let excelPath = this.path + "api-course/class/export-batch/sign-up?classIds=" + this.multipleSelection;
                window.open(excelPath);
            },
            // 出勤情况
            closeAttendanceDialog() {
                this.attendanceDialogVisible = false;
                this.attendanceClassId = 0;
                this.attendanceCurrPage = 1;
                this.attendanceTotalCount = 0;
                this.attendancePageSize = 10;
                this.attendanceTableData = [];
                this.attendanceSearchInfo = {}
            },
            async attendance(val) {
                let now = new Date();
                let nowDate = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
                this.attendanceDialogVisible = true;
                this.attendanceClassId = val.classId
                const res = await listCourseDate(val.classId)
                this.lessonsOptions = res.data;
                let classDate = '';
                this.lessonsOptions.forEach(i => {
                    if (i.value === nowDate) {
                        classDate = nowDate;
                    }
                })
                this.attendanceSearchInfo.classDate = classDate;
                this.getAttendanceTableData()
            },
            //出勤学生列表
            async selectDate(val) {
                this.$set(this.attendanceSearchInfo, this.attendanceSearchInfo.classDate, val)
            },
            attendanceHandleSizeChange(val) {
                this.attendancePageSize = val
                this.getAttendanceTableData()
            },
            attendanceHandlepageChange(val) {
                this.attendanceCurrPage = val
                this.getAttendanceTableData()
            },
            async getAttendanceTableData(currPage = this.attendanceCurrPage, pageSize = this.attendancePageSize) {
                const attendanceTable = await listAttendance(this.attendanceClassId, {
                    "currPage": currPage,
                    "pageSize": pageSize,
                    "classDate": this.attendanceSearchInfo.classDate,
                    "studentName": this.attendanceSearchInfo.studentName
                })
                this.attendanceTableData = attendanceTable.data.data
                this.attendanceTotalCount = attendanceTable.data.totalCount
                this.attendanceCurrPage = attendanceTable.data.currPage
                this.attendancePageSize = attendanceTable.data.pageSize
                this.$forceUpdate();
            },
            async attendanceSearch() {
                this.attendanceCurrPage = 1;
                this.attendancePageSize = 10;
                this.getAttendanceTableData();
            },

            // async showUpdateTeacherDialog(val) {
            //     const res = await simpleTeacherList(val.teacherId)
            //     this.teacherListOptions = res.data;
            //     this.form.classId = val.classId;
            //     this.form.teacherId = val.teacherId;
            //     this.form.teacherName = val.teacherName;
            //     this.updateTeacherDialogVisible = true;
            // },

            async getCourse(classId) {
                const res = await courseList(classId)
                this.courseListOptions = res.data
            },
            async getClassroom(classRoomId) {
                const res = await classRoomList(classRoomId)
                this.classRoomListOptions = res.data
            },
            async getTeacher(teacherId) {
                const res = await simpleTeacherList(teacherId)
                this.teacherListOptions = res.data
            },
            initForm() {
                this.$forceUpdate();
                //this.$refs.areaForm.resetFields();
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
                this.showFlag = true;
                this.adminSignInFlag = false;
                this.adminToSignFlag = false;
                this.adminOpenClassFlag = false;
            },
            closeRgistrationDialog() {
                this.registrationDialogVisible = false;
            },
            closeApplyDialog() {
                this.applyDialogVisible = false;
            },
            openDialog(type, status) {
                switch (type) {
                    case "add":
                        this.dialogTitle = "新增班级";
                        this.saveFlag = true;
                        this.showFlag = false;
                        this.form = {
                            courseId: '',
                            classRoomName: '',
                            teacherName: '',
                            courseHourCount: '',
                            courseHourPriceShow: '',
                            goodsFlag: ''
                        };
                        break;
                    case "edit":
                        this.dialogTitle = "编辑班级(" + status + ")";
                        break;
                    case "adminEdit":
                        this.dialogTitle = "编辑班级(" + status + ")";
                        break;
                    case "release":
                        this.dialogTitle = "发布班级(" + status + ")";
                        break;
                    case "show":
                        this.dialogTitle = "查看班级(" + status + ")";
                        break;
                    default:
                        break;
                }
                if (this.courseListOptions.length === 0) {
                    this.getCourse(0);
                }
                if (this.classRoomListOptions.length === 0 || type === "release") {
                    this.getClassroom(0);
                }
                if (this.teacherListOptions.length === 0) {
                    this.getTeacher(0);
                }
                this.type = type;
                this.dialogFormVisible = true;
            },
            //启用/停用
            async changeEnable(row) {
                const res = await enableClass(row.classId)
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "启用/停用成功",
                        showClose: true,
                    });
                }
                this.getTableData();
            },
            async showCourse(row) {
                const res = await classDetail(row.classId);
                if (row.classStatus === 0 || row.classStatus === 1 || row.classStatus === 7) {
                    this.showFlag = false;
                }
                this.form = res.data;
                if (res.data.classTime !== null && res.data.classTime !== '') {
                    let classTimeArray = res.data.classTime.split("~");
                    this.form.startTime = classTimeArray[0];
                    this.form.endTime = classTimeArray[1];
                }
                this.courseListOptions = [{courseId: this.form.courseId, courseName: this.form.courseName}]
                this.teacherListOptions = [{teacherId: this.form.teacherId, teacherName: this.form.teacherName}]
                this.classRoomListOptions = [{
                    classRoomId: this.form.classRoomId,
                    classRoomName: this.form.classRoomName
                }];
                this.openDialog("show", this.filterStatus(row.classStatus));
                this.saveFlag = false;
            },
            async editArea(row) {
                const res = await classDetail(row.classId);
                if (row.classStatus === 0 || row.classStatus === 1 || row.classStatus === 7) {
                    this.showFlag = false;
                }
                this.form = res.data;
                if (res.data.classTime !== null && res.data.classTime !== '') {
                    let classTimeArray = res.data.classTime.split("~");
                    this.$set(this.form, 'endTime', classTimeArray[1]);
                    this.$set(this.form, 'startTime', classTimeArray[0]);
                }
                if (this.form.organId !== 0) {
                    this.teacherListOptions = [{teacherId: this.form.teacherId, teacherName: this.form.teacherName}]
                }
                this.courseListOptions = [{courseId: this.form.courseId, courseName: this.form.courseName}]
                this.classRoomListOptions = [{
                    classRoomId: this.form.classRoomId === '0' ? '' : this.form.classRoomId,
                    classRoomName: this.form.classRoomName
                }];
                if (this.form.teacherUpdateFlag === 1) {
                    const teacherData = await simpleTeacherList(this.form.teacherId)
                    this.teacherListOptions = teacherData.data;
                }
                this.saveFlag = true;
                //管理员/运营对状态控制
                if (this.currentRoleId === 1 || this.currentRoleId === 2) {
                    this.adminBtnFlag = true;
                    if (row.classStatus === 2) {
                        this.adminToSignFlag = true;
                    }
                    if (row.classStatus === 3) {
                        this.adminSignInFlag = true;
                    }
                    if (row.classStatus === 4) {
                        this.adminOpenClassFlag = true;
                    }
                    this.openDialog("adminEdit", this.filterStatus(row.classStatus));
                } else {
                    this.openDialog("edit", this.filterStatus(row.classStatus));
                }


            },
            //删除班级
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deleteGrade(row.classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        // this.$message({
                        //     type: "info",
                        //     message: "已取消删除",
                        // });
                    });
            },
            //开始报名
            async signUpClass(row) {
                this.$confirm("开始报名, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await signUpClass(row.classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "开始报名成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        // this.$message({
                        //     type: "info",
                        //     message: "已取消开始报名",
                        // });
                    });
            },
            //开班
            async beginClass(row) {
                this.$confirm("开班, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await beginClass(row.classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "开班成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        // this.$message({
                        //     type: "info",
                        //     message: "已取消开班",
                        // });
                    });
            },
            async signUpDetail(row) {
                this.classId = row.classId;
                this.registrationTitle = row.className + "报名情况";
                this.getRegistrationTableData();
                this.registrationDialogVisible = true;
            },
            async getRegistrationTableData(currPage = this.registrationCurrPage, pageSize = this.registrationPageSize) {
                const registrationTable = await registrationList({
                    "currPage": currPage,
                    "pageSize": pageSize,
                    "classId": this.classId,
                    "studentName": this.signUpSearchInfo.studentName
                })
                this.registrationTableData = registrationTable.data.data
                this.registrationTotalCount = registrationTable.data.totalCount
                this.registrationCurrPage = registrationTable.data.currPage
                this.registrationPageSize = registrationTable.data.pageSize
                this.$forceUpdate()

            },
            //申请开班学校下拉选择
            handleApplySchool(val) {
                this.$forceUpdate();
                this.schoolListOptions.forEach(item => {
                    if (val === item.schoolId) {
                        this.schoolForm.schoolName = item.schoolName
                    }
                })
            },
            //申请开班
            async applySchoolDialog(row) {
                const res = await userSchoolList()
                this.schoolListOptions = res.data;
                this.schoolForm.classId = row.classId;
                this.schoolForm.schoolId = row.schoolId === '0' ? '' : row.schoolId;
                this.schoolForm.schoolName = row.schoolName;
                this.applyDialogVisible = true;
            },
            //申请开班
            async applySchool() {
                this.$confirm("此操作申请该学校开班, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await applySchoolCourse(this.schoolForm);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "更新成功!",
                            });
                            this.closeApplyDialog();
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            //取消申请
            async applyCancel(classId) {
                this.$confirm("此操作取消申请该学校开班, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await applySchoolCourseCancel(classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "更新成功!",
                            });
                            this.closeApplyDialog();
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            //学校发布
            async releaseApply(classId, classStatus) {
                const res = await classDetail(classId);
                this.form = res.data;
                if (res.data.classTime !== null && res.data.classTime !== '') {
                    let classTimeArray = res.data.classTime.split("~");
                    this.$set(this.form, 'endTime', classTimeArray[1]);
                    this.$set(this.form, 'startTime', classTimeArray[0]);
                }
                if (this.form.organId !== 0) {
                    this.teacherListOptions = [{teacherId: this.form.teacherId, teacherName: this.form.teacherName}]
                }
                if (this.form.classRoomId === '0') {
                    this.form.classRoomId = '';
                    this.form.stuNoMin = '';
                    this.form.stuNoMax = '';
                }
                this.courseListOptions = [{courseId: this.form.courseId, courseName: this.form.courseName}]
                this.classRoomListOptions = [{
                    classRoomId: this.form.classRoomId,
                    classRoomName: this.form.classRoomName
                }];
                if (this.form.teacherUpdateFlag === 1) {
                    const teacherData = await simpleTeacherList(this.form.teacherId)
                    this.teacherListOptions = teacherData.data;
                }
                this.saveFlag = true;
                this.openDialog("release", this.filterStatus(classStatus));
            },
            //取消报名
            async signUpCancelDialog(classId) {
                this.$confirm("此操作该班将取消报名, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await signUpCancel(classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "更新成功!",
                            });
                            this.closeApplyDialog();
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            //拒绝申请
            async refuseDialog(classId) {
                this.$confirm("此操作将拒绝该机构申请开吧, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await refuseApply(classId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "更新成功!",
                            });
                            this.closeApplyDialog();
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            async enterDialog() {
                this.$refs.areaForm.validate(async (valid) => {
                    if (valid) {
                        switch (this.type) {
                            case "add": {
                                if (this.form.startTime !== undefined && this.form.startTime !== '' && this.form.endTime !== '') {
                                    this.form.classTime = this.form.startTime + "~" + this.form.endTime;
                                }
                                const res = await addGrade(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            case "edit": {
                                if (this.form.startTime !== undefined && this.form.startTime !== '' && this.form.endTime !== '') {
                                    this.form.classTime = this.form.startTime + "~" + this.form.endTime;
                                }
                                const res = await editUnReleaseGrade(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "编辑成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            case "release": {
                                if (this.form.startTime !== '' && this.form.endTime !== '') {
                                    this.form.classTime = this.form.startTime + "~" + this.form.endTime;
                                }
                                const res = await releaseGrade(this.form, this.form.classId);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "发布成功",
                                        showClose: true,
                                    });
                                }
                                this.closeDialog();
                                this.getTableData();
                            }
                                break;
                            case "adminEdit": {
                                if (this.form.startTime !== '' && this.form.endTime !== '') {
                                    this.form.classTime = this.form.startTime + "~" + this.form.endTime;
                                }
                                const res = await adminEditClass(this.form, this.form.classId);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "修改成功",
                                        showClose: true,
                                    });
                                }
                                this.closeDialog();
                                this.getTableData();
                            }
                                break;
                            default: {
                                this.$message({
                                    type: "error",
                                    message: "未知操作",
                                    showClose: true,
                                });
                            }
                                break;
                        }
                    }
                });
            },
            //文件上传
            checkFile(file) {
                this.saveFlag = false;
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                return (isPng || isJPG) && isLt2M;
            },
            uploadSuccess(res) {
                this.fullscreenLoading = false;
                this.saveFlag = true;
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            },
            uploadError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.saveFlag = true;
                this.fullscreenLoading = false;
            },
        },
        created() {
            this.getTableData();
            this.btns = this.$route.meta.btnList;
            this.currentRoleId = this.userInfo.roleId
            console.log(this.currentRoleId)
            //机构
            // if (this.currentRoleId === 3) {
            this.classStatusOptions = [{
                value: '',
                label: "全部",
            },
                {
                    value: 0,
                    label: "待申请",
                },
                {
                    value: 1,
                    label: "待发布",
                },
                {
                    value: 2,
                    label: "待报名",
                },
                {
                    value: 3,
                    label: "报名中",
                },
                {
                    value: 4,
                    label: "待开班",
                },
                {
                    value: 5,
                    label: "已开班",
                },
                {
                    value: 6,
                    label: "已完成",
                }, {
                    value: 7,
                    label: "拒绝",
                },
                {
                    value: 8,
                    label: "开班失败",
                }]
            // }
        },
    };
</script>
<style scoped lang="scss">
    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        .item-label {
            ::v-deep .el-form-item__label {
                width: 142px !important;
            }

            ::v-deep .el-input__inner {
                width: 162px !important;
            }

            ::v-deep .el-date-editor.el-input {
                width: 162px !important;
            }
        }

        .item-labels {
            ::v-deep .el-form-item__content {
                width: 225px !important;
            }

            ::v-deep .el-form-item__label {
                width: 80px !important;
            }

            ::v-deep .el-input {
                width: 102px !important;
            }

            ::v-deep .el-input__inner {
                width: 102px !important;
            }

        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409eff;
        }
    }

    .registrationDialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            height: 800px;
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        .item-label {
            ::v-deep .el-form-item__label {
                width: 142px !important;
            }

            ::v-deep .el-input__inner {
                width: 162px !important;
            }

            ::v-deep .el-date-editor.el-input {
                width: 162px !important;
            }
        }

        .item-labels {
            ::v-deep .el-form-item__content {
                width: 225px !important;
            }

            ::v-deep .el-form-item__label {
                width: 80px !important;
            }

            ::v-deep .el-input {
                width: 102px !important;
            }

            ::v-deep .el-input__inner {
                width: 102px !important;
            }

        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409eff;
        }
    }
</style>
